<template>
  <div class="container">
    <div class="app-container">
      <el-button size="mini" type="primary" @click="addPermission(0,1)">添加权限</el-button>
      <el-table
        class="permission-table"
        border
        row-key="id"
        default-expand-all
        :header-cell-style="{fontSize: '14px', backgroundColor: '#F5F6F8',color:'#909399'}"
        :data="permissionList"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="标识"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button v-if="row.type===1" type="text" @click="addPermission(row.id,2)">添加</el-button>
            <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
            <el-button type="text" @click="deletePermission(row.id)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹层 -->
      <el-dialog :visible.sync="showPermission" width="500" :title="showTitle">
        <el-form ref="permissionForm" label-width="120px" :model="permissionData" :rules="rule">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="permissionData.name" size="mini" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="permissionData.code" size="mini" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="permissionData.description" size="mini" style="width:90%" />
          </el-form-item>
          <el-form-item label="开启" prop="enVisible">
            <el-switch v-model="permissionData.enVisible" size="mini" :inactive-value="0" :active-value="1" />
          </el-form-item>
          <el-row type="flex" align="middle" justify="center" style="height: 60px;">
            <el-col :span="6">
              <el-button size="mini" type="primary" @click="postPermission">确认</el-button>
              <el-button size="mini" @click="closePermission">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getPermissionList, postPermission, deletePermission, getPermissionDetail, updatePermission } from '@/api/permission'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [],
      showPermission: false,
      permissionData: {
        name: '',
        code: '',
        description: '',
        type: null,
        pid: null,
        enVisible: 0
      },
      rule: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.permissionData.id ? '编辑权限点' : '添加权限点'
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      this.permissionList = transListToTreeData(await getPermissionList(), 0)
    },
    addPermission(pid, type) {
      this.permissionData.type = type
      this.permissionData.pid = pid
      this.showPermission = true
    },
    postPermission() {
      this.$refs.permissionForm.validate(async isOk => {
        if (isOk) {
          if (this.permissionData.id) {
            // 编辑
            await updatePermission(this.permissionData)
            this.$message.success('修改权限点成功')
          } else {
            // 添加
            await postPermission(this.permissionData)
            this.$message.success('新增权限成功')
          }

          this.getPermissionList()
          this.closePermission()
        }
      })
    },
    closePermission() {
      this.permissionData = {
        name: '',
        code: '',
        description: '',
        type: null,
        pid: null,
        enVisible: 0
      }
      this.$refs.permissionForm.resetFields()
      this.showPermission = false
    },
    async editPermission(id) {
      this.permissionData = await getPermissionDetail(id)
      this.showPermission = true
    },
    deletePermission(id) {
      this.$confirm('确定要删除该数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await deletePermission(id)
        this.getPermissionList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  margin: 20px;
  padding: 20px;

}
.permission-table {
  margin-top: 20px;
}
</style>
